<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        background-color: rgb(10, 10, 10);
        height: 100vh;
        margin: 0px;
        overflow: hidden;
    }

    #wrapper {
        height: 140vmax;
        width: 140vmax;
        position: absolute;
    }

    .swatches {
        border-radius: 1vmax;
        position: absolute;
        transition: transform 800ms ease;
    }

    .swatches:hover {
        transform: scale(1.1);
    }

    .swatches:nth-child(1) {
        background-color: rgb(255, 238, 88);
        height: 14%;
        width: 20%;
        left: 5%;
        top: 5%;
    }

    .swatches:nth-child(2) {
        background-color: rgb(66, 165, 245);
        height: 24%;
        width: 14%;
        left: 42%;
        top: 12%;
    }

    .swatches:nth-child(3) {
        background-color: rgb(239, 83, 80);
        height: 18%;
        width: 16%;
        left: 12%;
        top: 34%;
    }

    .swatches:nth-child(4) {
        background-color: rgb(102, 187, 106);
        height: 14%;
        width: 12%;
        left: 45%;
        top: 48%;
    }

    .swatches:nth-child(5) {
        background-color: rgb(171, 71, 188);
        height: 16%;
        width: 32%;
        left: 8%;
        top: 70%;
    }

    .swatches:nth-child(6) {
        background-color: rgb(255, 167, 38);
        height: 24%;
        width: 24%;
        left: 68%;
        top: 8%;
    }

    .swatches:nth-child(7) {
        background-color: rgb(63, 81, 181);
        height: 16%;
        width: 20%;
        left: 50%;
        top: 74%;
    }

    .swatches:nth-child(8) {
        background-color: rgb(141, 110, 99);
        height: 24%;
        width: 18%;
        left: 72%;
        top: 42%;
    }

    .swatches:nth-child(9) {
        background-color: rgb(250, 250, 250);
        height: 10%;
        width: 8%;
        left: 84%;
        top: 84%;
    }
</style>
<body>
<div id="wrapper">
    <div class="swatches"></div>
    <div class="swatches"></div>
    <div class="swatches"></div>
    <div class="swatches"></div>
    <div class="swatches"></div>
    <div class="swatches"></div>
    <div class="swatches"></div>
    <div class="swatches"></div>
    <div class="swatches"></div>
</div>
</body>
</html>
<script>
    const wrapper = document.getElementById("wrapper");

    // clientX/clientY读取鼠标坐标

    window.onmousemove = e => {
        const mouseX = e.clientX,
            mouseY = e.clientY;

        // 文档显示区的宽度与高度
        const xDecimal = mouseX / window.innerWidth,
            yDecimal = mouseY / window.innerHeight;

        const maxX = wrapper.offsetWidth - window.innerWidth,
            maxY = wrapper.offsetHeight - window.innerHeight;

        const panX = maxX * xDecimal * -1,
            panY = maxY * yDecimal * -1;

        wrapper.animate({
            transform: `translate(${panX}px, ${panY}px)`
        }, {
            duration: 4000,
            fill: "forwards",
            easing: "ease"
        })
    }
</script>
